<template>
  <uni-popup ref="ketoneInputDialog" type="dialog">
    <uni-popup-dialog
      :before-close="true"
      class="my-dialog"
      ref="inputClose"
      mode="input"
      title="测量血酮值"
      @confirm="dialogInputConfirm"
      @close="close"
    >
      <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
        <uni-forms-item required name="ketone">
          <uni-easyinput v-model="valiFormData.ketone" placeholder="请输入血酮值" />
        </uni-forms-item>
      </uni-forms>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue'
const ketoneInputDialog = ref()
const valiForm = ref()

const props = defineProps({
  eqiupData: Object,
})
const valiFormData = reactive({
  ketone: props.eqiupData?.checkValue ? props.eqiupData?.checkValue : '',
})
const rules = {
  ketone: {
    rules: [
      {
        required: true,
        errorMessage: '血酮不能为空',
      },
      {
        format: 'number',
        errorMessage: '血酮只能输入数字',
      },
    ],
  },
}
const emit = defineEmits(['ketoneSubmit'])
const dialogInputConfirm = () => {
  valiForm.value
    .validate()
    .then((res) => {
      emit('ketoneSubmit', JSON.parse(JSON.stringify(valiFormData)))
      ketoneInputDialog.value.close()
      valiFormData.ketone = ''
    })
    .catch((err) => {
      console.log('err', err)
    })
}
const close = () => {
  valiFormData.ketone = ''
  ketoneInputDialog.value.close()
  valiForm.value.clearValidate(['ketone'])
}
defineExpose({ ketoneInputDialog })
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>
<style scoped>
::v-deep .my-dialog .uni-dialog-content {
  padding-bottom: 0 !important;
}
::v-deep .my-dialog .uni-popup__info {
  color: #333 !important;
}
::v-deep .my-dialog .uni-forms {
  width: 100% !important;
}
::v-deep .my-dialog .is-required {
  display: none !important;
}
</style>
